<template>
  <view v-if="shenheStatus == 0" class="fenxiao">
    <view
      class="nav"
      :style="{
        paddingTop: statusBarHeight + 'px',
        background: `rgba(0,0,0,${opacity})`
      }"
    >
      <view class="nav-head">
        <image
          v-if="asyncImgs"
          :src="asyncImgs.common.back"
          mode="widthFix"
          @click="$utils.goBack()"
        ></image>

        <view class="title">返利中心</view>
      </view>
    </view>

    <image
      v-if="asyncImgs"
      :src="asyncImgs.sharer.fenxiao_bg"
      mode="widthFix"
      class="header-bg"
    >
    </image>

    <view class="content">
      <view class="content-header">
        <view class="left">
          <view class="name">
            {{ user_info.nickname }}
          </view>
          <view v-if="levelName" class="level">
            <image src="../static/images/1.png"></image>
            <view> {{ levelName }}</view>
          </view>
        </view>
        <image class="tx" :src="user_info.avatar_url" mode="aspectFill" />
      </view>

      <view class="content-info">
        <view class="hd" v-if="level">
          <!-- <view></view> -->
          <view
            >释放加速比例:{{ level.add_rat }}% / 返利赠送比例:{{
              level.add_rebate
            }}%</view
          >
        </view>
        <view class="bd">
          <view class="bd-con">
            <view class="list">
              <view class="item">
                <view class="tit">累计积分（个）</view>
                <view class="price">
                  {{ total.integral }}
                </view>
              </view>
              <view class="item">
                <view class="tit">累计余额（元）</view>
                <view class="price">
                  {{ total.balance }}
                </view>
              </view>
              <view class="item">
                <view class="tit">累计佣金（元）</view>
                <view class="price">{{ total.commission }}</view>
              </view>
            </view>

            <view class="numList">
              <div class="line"></div>

              <view class="item">
                <image src="../static/images/2.png" mode="aspectFill" />
                <view class="con">
                  <view class="tit">待返积分（个）</view>
                  <view class="num">{{ total.integralWait }}</view>
                </view>
              </view>
              <view class="item item2">
                <image src="../static/images/3.png" mode="aspectFill" />
                <view class="con">
                  <view class="tit">待返余额（元）</view>
                  <view class="num">{{ total.balanceWait }}</view>
                </view>
              </view>
              <view class="item">
                <image src="../static/images/4.png" mode="aspectFill" />
                <view class="con">
                  <view class="tit">待返佣金（元）</view>
                  <view class="num">{{ total.commissionWait }}</view>
                </view>
              </view>
            </view>

            <view class="btn">
              <view class="item" @click="onClickUrl('/rebateSelf/order/index')"
                >返利订单</view
              >
              <view class="line"></view>
              <view class="item" @click="onClickUrl('/rebateSelf/info/index')"
                >返利明细</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import { orderRebateSelfOrder } from "../api/index";

export default {
  components: { Shenhe },
  data() {
    return {
      user_info: {
        nickname: "",
        avatar_url: ""
      },
      total: {
        integral: 0,
        balance: 0,
        commission: 0,
        integralWait: 0,
        balanceWait: 0,
        commissionWait: 0
      },
      levelName: "",
      level: null
    };
  },

  onLoad() {
    this.user_info = uni.getStorageSync("userInfo");
  },

  onShow() {
    this.init();
  },

  methods: {
    async init() {
      const res = await orderRebateSelfOrder({
        page: 1
      });

      if (!res.code) {
        this.levelName = res.levelName;
        let { balance, jifen, price } = res.total;

        this.total = {
          integral: jifen.price_total,
          balance: balance.price_total,
          commission: price.price_total,
          integralWait: jifen.price_wait,
          balanceWait: balance.price_wait,
          commissionWait: price.price_wait
        };

        this.level = res.level;
      }
    },
    onClickUrl(url) {
      this.$utils.toUrl(url, "navigate");
    }
  }
};
</script>

<style lang="scss" scoped>
.fenxiao {
  min-height: 100vh;
  background: #f2f2f2;
  position: relative;

  .header {
    position: relative;
    z-index: 1;
    color: #fff;
    margin: 0px auto 40rpx;
    width: 678rpx;
    height: 292rpx;
    background: #ffffff;
    box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.03);
    border-radius: 20rpx;
    padding: 48rpx 40rpx 44rpx;
    .header-top {
      .left {
        width: 0;
        flex: 1;
        > image {
          width: 72rpx;
          height: 72rpx;
          background: #f1f1f1;
          border: 2rpx solid #ffffff;
          border-radius: 120rpx;
        }
        .user-info {
          margin-left: 12rpx;

          > view:nth-child(1) {
            line-height: 44rpx;
            font-size: 32rpx;
            font-weight: 600;
            color: #262626;
          }
          > view:nth-child(2) {
            line-height: 32rpx;
            font-size: 22rpx;
            font-weight: 400;
            color: #262626;
          }
        }
      }
      .right {
        font-size: 24rpx;
        font-weight: 600;
        color: #f0250e;
        .iconfont {
          font-weight: 400;
          color: #f0250e;
        }
      }
    }
    .header-bottom {
      margin-top: 58rpx;
      color: #262626;
      > view:nth-child(1) {
        flex: 1;
        width: 0;
        > text:nth-child(1) {
          font-size: 22rpx;
        }
        > text:nth-child(2) {
          font-size: 48rpx;
          font-weight: 600;
          margin-left: 10rpx;
        }
        > text:nth-child(3) {
          font-size: 36rpx;
        }
      }
      .tixian-bt {
        width: 146rpx;
        line-height: 62rpx;
        text-align: center;
        border-radius: 120rpx;
        font-size: 28rpx;
        color: #ffffff;
        background: #f0250e;
      }
    }
  }
  .bottom {
    .yongjin {
      margin: 0 auto 24rpx;
      width: 678rpx;
      height: 166rpx;
      background: #ffffff;
      border: 2rpx solid #f1f1f1;
      opacity: 1;
      border-radius: 20rpx;
      padding: 28rpx;
      > view:nth-child(1) {
        margin-bottom: 4rpx;
        font-size: 24rpx;
        color: #8c8c8c;
        > text {
          margin-right: 8rpx;
          font-weight: 600;
          font-size: 28rpx;
          color: #262626;
        }
      }
      > view:nth-child(2) {
        line-height: 66rpx;
        font-size: 48rpx;
        font-weight: 600;
        color: #262626;
      }
    }
    .pair {
      width: 678rpx;
      margin: 0 auto 24rpx;
      display: flex;
      flex-wrap: wrap;
      > .item {
        padding: 28rpx;
        flex-shrink: 0;
        width: 326rpx;
        height: 166rpx;
        background: #ffffff;
        border: 2rpx solid #f1f1f1;
        border-radius: 20rpx;
        margin-bottom: 18rpx;

        > view:nth-child(1) {
          margin-bottom: 4rpx;
          font-size: 24rpx;
          color: #8c8c8c;
          > text {
            margin-right: 8rpx;
            font-weight: 600;
            font-size: 28rpx;
            color: #262626;
          }
        }
        > view:nth-child(2) {
          line-height: 66rpx;
          font-size: 48rpx;
          font-weight: 600;
          color: #262626;
        }
      }
    }
  }
  .header-bg {
    width: 100%;
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
  }
}

.nav {
  position: sticky;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 9;
  padding: 0 32rpx;
  transition: 0.3s all;

  .nav-head {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
  }

  image {
    position: absolute;
    left: 0;
    top: 50%;
    width: 19rpx;
    transform: translateY(-50%);
    filter: brightness(10%);
  }

  .title {
    font-size: 36rpx;
    font-weight: bold;
    color: #1d1d1d;
  }
}

// 以下是新写的
.content {
  position: relative;
  z-index: 2;
  padding: 0 24rpx;
}

.content-header {
  display: flex;
  align-items: center;
  padding: 30rpx 0;

  .level {
    display: inline-block;

    image {
      width: 26rpx;
      height: 26rpx;
      vertical-align: middle;
    }

    view {
      padding: 0 10rpx;
      font-size: 18rpx;
      height: 26rpx;
      overflow: hidden;
      vertical-align: middle;
    }
  }

  .left {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  .level {
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 32px;
  }

  .tx {
    width: 74rpx;
    height: 74rpx;
    border-radius: 32px;
  }

  .name {
    margin: 0 10rpx 0 24rpx;
    overflow: hidden;
    font-size: 30rpx;
    color: #262626;
    font-weight: bold;
  }
}

.content-info {
  .hd {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24rpx;
    height: 80rpx;
    background: #f0250e;
    border-radius: 24rpx 24rpx 0 0;
    color: #fff;
    font-size: 28rpx;
  }

  .bd {
    box-sizing: border-box;
    background: linear-gradient(180deg, #f0250e 0%, #ffb7af 100%);
    border-radius: 0rpx 0rpx 24rpx 24rpx;
    padding: 0 8rpx 8rpx;

    .bd-con {
      overflow: hidden;
      padding: 30rpx;
      box-sizing: border-box;
      background: #fff;
      border-radius: 20rpx;
    }

    .list {
      display: flex;
      margin: 10rpx 0 40rpx;

      .item {
        width: 33.33%;
        text-align: center;
      }

      .tit {
        font-size: 24rpx;
        color: #262626;
      }

      .price {
        padding-top: 5rpx;
        font-size: 34rpx;
        font-weight: bold;
      }
    }

    .line {
      width: 2rpx;
      height: 36rpx;
      background: #e5e5e5;
    }

    .numList {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      margin: 0 10rpx;
      padding: 10rpx 0 0;
      border-top: 1px solid #f8f8f8;

      .item {
        display: flex;
        width: 50%;
        padding-top: 30rpx;
      }

      .item2 {
        padding-left: 38rpx;
      }

      .line {
        position: absolute;
        left: 50%;
        top: 22%;
      }

      image {
        width: 48rpx;
        height: 48rpx;
        border-radius: 32px;
      }

      .con {
        margin-left: 20rpx;
        font-size: 24rpx;

        .tit {
          color: #262626;
        }

        .num {
          color: #8c8c8c;
        }
      }
    }

    .btn {
      display: flex;
      align-items: center;
      margin: 56rpx 30rpx 30rpx;
      height: 80rpx;
      background: #f0250e;
      border-radius: 32px;

      .line {
        background: rgba(255, 255, 255, 0.5);
      }

      .item {
        flex: 1;
        overflow: hidden;
        text-align: center;
        font-size: 28rpx;
        color: #fff;
      }
    }
  }
}

.order {
  .list {
    display: flex;
    flex-wrap: wrap;
  }

  .item {
    margin: 24rpx 56rpx 0 0;
  }

  .subtit {
    display: flex;
    align-items: center;
    color: #262626;
    font-size: 28rpx;

    text {
      color: #8c8c8c;
    }

    .iconfont {
      font-size: 24rpx;
    }
  }

  .num {
    font-size: 36rpx;
    font-weight: bold;
    color: #262626;
  }
}

.daiban {
  .hd {
    display: flex;
    align-items: center;
    padding: 0 24rpx;
    height: 90rpx;
    background: linear-gradient(277deg, #ffffff 0%, #fde7e7 100%);
    border-radius: 20rpx 20rpx 0 0;
    .m-tit image {
      position: relative;
      top: 6rpx;
      margin-right: 14rpx;
      width: 28rpx;
    }
  }

  .bd {
    border-radius: 0 0 20rpx 20rpx;

    .item {
      display: flex;
      align-items: center;
    }

    .m-tit {
      padding-bottom: 5rpx;
      font-size: 26rpx;
    }

    .des {
      font-size: 22rpx;
      color: #8c8c8c;
    }

    .let {
      flex: 1;
      overflow: hidden;
    }

    .rig {
      margin-left: 10rpx;
    }

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 136rpx;
      height: 52rpx;
      background: #f0250e;
      border-radius: 40rpx;
      color: #fff;
      font-size: 24rpx;
    }
  }
}

.mt {
  margin-top: 24rpx;
}

.m-box {
  background: #fff;
  padding: 24rpx;
  border-radius: 20rpx;
}

.m-tit {
  font-size: 30rpx;
  font-weight: bold;
  color: #262626;
}
</style>
